<!doctype html>
<html lang="en">

<%@ include file="Include_Professor_Imports.jsp"%>
<%@ include file="Include_Design_Table.jsp"%> 
<head>
	<script>
		var studentsRow = new Array();
		var questionsRow = new Array();
		var examsRow = new Array();

		function checkForm()
		{
			var examName = document.getElementById("examName");
			var examDuration = document.getElementById("examDuration");
			var examPassing = document.getElementById("examPassing");
			var intExp = /^\d+$/;	
			var floatExp = /^[-+]?[0-9]+(\.[0-9]+)?$/;

			if (examName.value == '' || examName.value.indexOf('\\') !== -1 || examName.value.indexOf('\'') !== -1 || examName.value.indexOf('\"') !== -1)
			{
				alert('Please enter a valid Exam Name.');
				return false;
			} 
			if (!examDuration.value.match(intExp)|| examDuration.value == '' || examDuration.value.indexOf('\\') !== -1 || examDuration.value.indexOf('\'') !== -1 || examDuration.value.indexOf('\"') !== -1)
			{
				alert('Please enter a valid Exam Duration.');
				return false;
			} 
			if (!examPassing.value.match(floatExp) || examPassing.value == '' || examPassing.value.indexOf('\\') !== -1 || examPassing.value.indexOf('\'') !== -1 || examPassing.value.indexOf('\"') !== -1)
			{
				alert('Please enter a valid Exam Passing Grade.');
				return false;
			} 
			return true;
		}
	</script>
</head>
<body>
<!-- HEADER -->
<div style="position: fixed; width: 100%; z-index: 1;">
<%@ include file="Include_Professor_Header.jsp"%>

<section id="secondary_bar">
<div class="user"><!-- <a class="logout_user" href="#" title="Logout">Logout</a> -->
</div>
<div class="breadcrumbs_container"><article class="breadcrumbs"><a
	href="ProfessorHomeServlet">Home</a>
<div class="breadcrumb_divider"></div>
<a href="ProfessorViewExamServlet?type=Real">Live Exams</a>
<div class="breadcrumb_divider"></div>
<a class="current">Edit</a></article></div>
</section>
<!-- end of secondary bar -->
</div>
<%@ include file="Include_Professor_Menu.jsp"%>

<section id="main" class="column">

<%@ include file="Include_Professor_Message.jsp"%>

<c:set var="questionsAll" value="${requestScope.questions}"></c:set>
<c:set var="exam" value="${requestScope.exam}"></c:set>

	<!-- end of post new article -->
	<form method="post" action="AddAndEditExamServlet?type=Real&examID=${exam.examID}">
	<article class="module width_full">
		<header>
			<h3>Live Exam ID :<c:out value=" ${exam.examID}"></c:out></h3>
		</header>
		<div class="module_content">
		
			<c:choose>
				<c:when test="${empty questions}">
					<fieldset><label>Exam Name</label> <input type="text" name="examName" id="examName" value="${exam.examName}" readonly>
						</fieldset>
					<fieldset style="width: 48%; float: left; margin-right: 3%;">
					<label>Duration (in Minutes)</label> <input style="width: 92%;"
						type="text" name="examDuration" id="examDuration" value="${exam.duration}" readonly></fieldset>
					<fieldset style="width: 48%; float: left;"><label>Passing
					Grade (1 to 100)</label> <input style="width: 92%;" type="text" name="examPassing" id="examPassing" value="${exam.passingPercent}" readonly></fieldset>
					<div class="clear">
				
				</c:when>
				<c:otherwise>
				
					<fieldset><label>Exam Name</label> <input type="text" name="examName" id="examName" value="${exam.examName}">
						</fieldset>
					<fieldset style="width: 48%; float: left; margin-right: 3%;">
					<label>Duration (in Minutes)</label> <input style="width: 92%;"
						type="text" name="examDuration" id="examDuration" value="${exam.duration}"></fieldset>
					<fieldset style="width: 48%; float: left;"><label>Passing
					Grade (1 to 100)</label> <input style="width: 92%;" type="text" name="examPassing" id="examPassing" value="${exam.passingPercent}"></fieldset>
					<div class="clear">
				
				</c:otherwise>
			</c:choose>
			
				
		
		
		</div>		
		
		<div class="tablemodule2" style="max-height: 400px; overflow: auto;">
			<input type="hidden" id="getid" value="0" name="examQuestions"/>
        	<script>var objinput = document.getElementById("getid");</script>
			<h5>Questions <div>Search: <input name="filt" onKeyUp="filter2(this, 'questionTable', '1')" type="text"></div></h5>
			<table id="questionTable" class="tablesorter" cellspacing="0">
				<thead>
					<tr>
						<th>ID</th>
						<th>Question</th>
						<th>Category</th>
						<th>Type</th>
						<th>Answer</th>
						<th>Choices</th>
					</tr>
				</thead>
				<tbody>
					<c:choose>
						<c:when test="${empty questionsAll}">
							<c:forEach items="${exam.questions}" var="questionObj" varStatus="x">
								<tr id="selectedQuestion${x.count}">
									<td><c:out value="${questionObj.questionID }"/> </td>
									<td><c:out value="${questionObj.question }"/></td>
									<td><c:out value="${questionObj.category}"/></td>
									<td>
									<c:choose>
										<c:when test="${questionObj.getClass().getSimpleName() eq 'MultipleChoice'}">
											Multiple Choice
										</c:when>
										<c:otherwise>
											True or False
										</c:otherwise>
									</c:choose>
									</td>
									<td> <c:out value="${questionObj.answer }"/> </td>
									<td>
										<c:forEach items="${questionObj.choices}" var="choices" varStatus="i" >
										
											<c:choose>
												<c:when test="${questions.size() eq i.count}">
													<c:out value="${ choices }" />
												</c:when>
												<c:otherwise>
													<c:out value="${choices}," />
												</c:otherwise>
											</c:choose>
																	
										</c:forEach>
									</td>
								</tr>
							<script> 
								addObjInArray(document.getElementById("selectedQuestion${x.count}"),objinput,questionsRow);
							</script>
							</c:forEach>
						</c:when>
						<c:otherwise>
							<c:forEach items="${questionsAll}" var="questionObj" varStatus="x">
									<c:choose>
										<c:when test="${exam.questions.contains(questionObj)}">
											<tr onclick="multiplehighlight_6(this, objinput, questionsRow)" id="selectedQuestion${x.count}">
												<td class="select"><c:out value="${questionObj.questionID }"/> </td>
												<td class="select"><c:out value="${questionObj.question }"/></td>
												<td class="select"><c:out value="${questionObj.category}"/></td>
												<td class="select">
												<c:choose>
													<c:when test="${questionObj.getClass().getSimpleName() eq 'MultipleChoice'}">
														Multiple Choice
													</c:when>
													<c:otherwise>
														True or False
													</c:otherwise>
												</c:choose>
												</td>
												<td class="select"> <c:out value="${questionObj.answer }"/> </td>
												<td class="select">
													<c:forEach items="${questionObj.choices}" var="choices" varStatus="i" >
													
														<c:choose>
															<c:when test="${questionsAll.size() eq i.count}">
																<c:out value="${ choices }" />
															</c:when>
															<c:otherwise>
																<c:out value="${choices}," />
															</c:otherwise>
														</c:choose>
																				
													</c:forEach>
												</td>
											</tr>
											<script> 
												addObjInArray(document.getElementById("selectedQuestion${x.count}"),objinput,questionsRow);
											</script>
										</c:when>
										<c:otherwise>
											<tr onclick="multiplehighlight_6(this, objinput, questionsRow)">
												<td><c:out value="${questionObj.questionID }"/> </td>
												<td><c:out value="${questionObj.question }"/></td>
												<td><c:out value="${questionObj.category}"/></td>
												<td>
												<c:choose>
													<c:when test="${questionObj.getClass().getSimpleName() eq 'MultipleChoice'}">
														Multiple Choice
													</c:when>
													<c:otherwise>
														True or False
													</c:otherwise>
												</c:choose>
												</td>
												<td> <c:out value="${questionObj.answer }"/> </td>
												<td>
													<c:forEach items="${questionObj.choices}" var="choices" varStatus="i" >
													
														<c:choose>
															<c:when test="${questionsAll.size() eq i.count}">
																<c:out value="${ choices }" />
															</c:when>
															<c:otherwise>
																<c:out value="${choices}," />
															</c:otherwise>
														</c:choose>
																				
													</c:forEach>
												</td>
											</tr>
										</c:otherwise>
									</c:choose>
								</c:forEach>
						
						</c:otherwise>
						
					</c:choose>
				
					
				</tbody>
			</table>
		</div>
		<div class="spacer"></div>
		<div class="clear"></div>
		
		<div class="tablemodule2" style="max-height: 400px; overflow: auto;">
			<input type="hidden" id="getid2" value="0" name="examStudents"/>
        	<script>var objinput2 = document.getElementById("getid2");</script>
			<h5>Examinees <div>Search: <input name="filt" onKeyUp="filter2(this, 'studentTable', '1')" type="text"></div></h5>
			<table class="tablesorter" id = "studentTable" cellspacing="0">
				<thead>
					<tr>
						<th>Examinee ID</th>
						<th>Last Name</th>
						<th>First Name</th>
						<th>Username</th>
					</tr>
				</thead>
				<tbody>
					<c:forEach items="${sessionScope.professor.students}" var="student" varStatus="x">
						<c:choose>
							<c:when test="${requestScope.studentsTakingExam.contains(student)}">
								<tr onclick="multiplehighlight_4(this, objinput2, studentsRow )" id="selectedStudents${x.count}">
									<td class="select"><c:out value="${student.userID }" /></td>
									<td class="select"><c:out value="${student.lastName }" /></td>
									<td class="select"><c:out value="${student.firstName }" /></td>
									<td class="select"><c:out value="${student.username }" /></td>
								</tr>
								<script> 
									addObjInArray(document.getElementById("selectedStudents${x.count}"),objinput2,studentsRow);
								</script>
							</c:when>
							<c:otherwise>
								<tr onclick="multiplehighlight_4(this, objinput2, studentsRow )">
									<td><c:out value="${student.userID }" /></td>
									<td><c:out value="${student.lastName }" /></td>
									<td><c:out value="${student.firstName }" /></td>
									<td><c:out value="${student.username }" /></td>
								</tr>
							</c:otherwise>
						</c:choose>
					</c:forEach>
				</tbody>
			</table>
			
		</div>
		<div class="spacer"></div>
		<div class="clear"></div>
		
		</div>
		<footer>
		<div class="submit_link"> <input type="submit" value="Update Exam" class="alt_btn" onclick="return checkForm()"> 
<!--			<input type="submit" value="Reset">-->
			</div>
		</footer>
	</article>
	</form>
	<!-- end of post new article -->



<div class="spacer"></div>
</section>


</body>

</html>